<script setup lang="ts">
import LotHist from "./LotHist.vue";
import SelYr from "./SelYr.vue";
import useSelYr, { useSelYrRefs } from "./useSelYr";
import useFetchStats from "../../hooks/useFetchStats";
const { toggleYear } = useSelYr();
const { yearRange, startRef, endRef } = useSelYrRefs();
const { updateParams } = useFetchStats();
defineProps({
  resData: {
    type: [Array, Object],
    default: () => []
  }
});
function updateYr(
  key: "start_year" | "end_year",
  it: string | number,
  idx: number
) {
  updateParams({
    [key]: it
  });
}
</script>
<template>
  <div class="px-14">
    <div
      class="font-normal text-20 color-[#444] lh-23 text-center not-italic mb-10"
    >
      สถิติหวย
    </div>
    <div class="flex justify-around items-center mb-10">
      <div class="flex justify-start items-center gap-x-10">
        <div class="font-400 text-16 color-[#444] lh-19 text-center not-italic">
          จาก
        </div>
        <div
          class="w-95 h-28 bg-[#fff] rounded-4 b-2 b-solid b-#004D8E center gap-x-10 relative z-999"
          @click="toggleYear('start')"
        >
          <div
            class="font-400 text-14 color-[#004D8E] lh-16 text-center not-italic"
          >
            <SelYr
              @update:curYr=" (it: string | number, idx: number) => updateYr('start_year', it, idx)"
              :curYr="yearRange[0]"
              ref="startRef"
            />
          </div>
          <div class="center">
            <SvgIcon name="Polygon_5" class="w-11 aspect-ratio-[11/6]" />
          </div>
        </div>
      </div>
      <div class="flex justify-start items-center gap-x-10">
        <div class="font-400 text-16 color-[#444] lh-19 text-center not-italic">
          ถึง
        </div>
        <div
          class="w-95 h-28 bg-[#fff] rounded-4 b-2 b-solid b-#004D8E center gap-x-10 relative z-999"
          @click="toggleYear('end')"
        >
          <div
            class="font-400 text-14 color-[#004D8E] lh-16 text-center not-italic"
          >
            <SelYr
              @update:curYr="(it: string | number, idx: number) => updateYr('end_year', it, idx)"
              :curYr="yearRange[1]"
              ref="endRef"
            />
          </div>
          <div class="center">
            <SvgIcon name="Polygon_5" class="w-11 aspect-ratio-[11/6]" />
          </div>
        </div>
      </div>
    </div>
    <slot name="default">
      <div class="mb-16 h-1"></div>
    </slot>
    <div class="mb-16" v-for="(it, idx) in resData" :key="idx">
      <LotHist :item="it" />
    </div>
  </div>
</template>
